<template>
  <view class="coupon-container">
    <!-- 顶部标题 -->
    <!-- <view class="header">
      <text class="title">领券中心</text>
      <text class="subtitle">拼团专享优惠券</text>
    </view> -->

    <!-- 优惠券列表 -->
    <view class="coupon-list">
      <view v-for="(item, index) in couponList" :key="index" class="coupon-item" :class="{
          'disabled': item.status !== 'available'
        }">
        <!-- 左侧金额区域 -->
        <view class="coupon-left">
          <text class="amount">{{item.configValue}}</text>
          <text class="unit">元</text>
          <!-- <text class="condition">满{{item.condition}}元可用</text> -->
        </view>

        <!-- 右侧信息区域 -->
        <view class="coupon-right">
          <text class="name">{{item.configName}}</text>
          <!-- <text class="time">有效期: {{item.startTime}}至{{item.endTime}}</text> -->
          <text class="scope">适用范围: {{item.remark}}</text>

          <button class="get-btn" :class="{
              'disabled': item.status !== 'available'
            }" @click="handleGetCoupon(item)">
            {{item.status === 'available' ? '立即领取' : 
              item.status === 'received' ? '已领取' : '已使用'}}
          </button>
        </view>

        <!-- 优惠券装饰元素 -->
        <view class="coupon-corner"></view>
        <view class="coupon-dots">
          <view class="dot" v-for="(dot, i) in 10" :key="i"></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getCouponApi, receiveCouponApi } from "@/sheep/api/index";
export default {
  data() {
    return {
      couponList: [
        // {
        //   id: 1,
        //   configName: "拼团专享券",
        //   configValue: "20",
        //   condition: "199",
        //   startTime: "2023-06-01",
        //   endTime: "2023-06-30",
        //   remark: "仅限拼团商品使用",
        //   status: "available", // available/received/used
        // },
        // {
        //   id: 2,
        //   configName: "新人专享券",
        //   configValue: "50",
        //   condition: "299",
        //   startTime: "2023-06-01",
        //   endTime: "2023-06-15",
        //   remark: "全品类通用",
        //   status: "received",
        // },
        // {
        //   id: 3,
        //   configName: "限时特惠券",
        //   configValue: "30",
        //   condition: "159",
        //   startTime: "2023-06-10",
        //   endTime: "2023-06-20",
        //   remark: "指定商品使用",
        //   status: "used",
        // },
      ],
    };
  },
  onLoad() {
    this.getCouponList();
  },
  methods: {
    // 获取优惠券列表
    getCouponList() {
      getCouponApi("coupon").then((res) => {
        this.couponList = res.data;
      });
    },
    // 领取优惠券
    handleGetCoupon(item) {
      if (item.status !== "available") return;
      receiveCouponApi(item.businessConfigId).then((res) => {
        if (res.code === 200) {
          // 领取成功
          item.status = "received";
          uni.showToast({
            title: "领取成功",
            icon: "success",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.coupon-container {
  padding: 20rpx;
  background-color: #f7f7f7;
  min-height: 100vh;

  .header {
    padding: 30rpx 0;
    text-align: center;
    .title {
      font-size: 36rpx;
      font-weight: bold;
      display: block;
    }
    .subtitle {
      font-size: 24rpx;
      color: #999;
    }
  }

  .coupon-list {
    .coupon-item {
      position: relative;
      display: flex;
      margin-bottom: 20rpx;
      height: 180rpx;
      background: linear-gradient(to right, #ff4e4e, #ff7e7e);
      border-radius: 12rpx;
      overflow: hidden;
      color: #fff;

      &.disabled {
        background: linear-gradient(to right, #cccccc, #dddddd);
      }

      .coupon-left {
        width: 220rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-right: 2rpx dashed rgba(255, 255, 255, 0.3);

        .amount {
          font-size: 50rpx;
          font-weight: bold;
          line-height: 1;
        }

        .unit {
          font-size: 28rpx;
          margin-top: 10rpx;
        }

        .condition {
          font-size: 22rpx;
          margin-top: 10rpx;
        }
      }

      .coupon-right {
        flex: 1;
        padding: 20rpx;
        display: flex;
        flex-direction: column;

        .name {
          font-size: 28rpx;
          font-weight: bold;
        }

        .time,
        .scope {
          font-size: 22rpx;
          margin-top: 10rpx;
          color: rgba(255, 255, 255, 0.8);
        }

        .get-btn {
          position: absolute;
          right: 20rpx;
          bottom: 20rpx;
          width: 160rpx;
          height: 50rpx;
          line-height: 50rpx;
          background-color: #fff;
          color: #ff4e4e;
          border-radius: 25rpx;
          font-size: 24rpx;
          padding: 0;

          &.disabled {
            background-color: #dddddd;
            color: #999;
          }
        }
      }

      .coupon-corner {
        position: absolute;
        top: 0;
        left: 200rpx;
        width: 40rpx;
        height: 40rpx;
        background-color: #f7f7f7;
        border-radius: 0 0 40rpx 0;
      }

      .coupon-dots {
        position: absolute;
        left: 200rpx;
        top: 40rpx;
        bottom: 0;
        width: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .dot {
          width: 8rpx;
          height: 8rpx;
          background-color: #f7f7f7;
          border-radius: 50%;
        }
      }
    }
  }
}
</style>